import React, { useState, useEffect }  from 'react'
import { Popconfirm, Modal, Divider, Col, Form, Table, Select, Icon, Input, DatePicker, Radio, InputNumber, message, Button } from 'antd'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import { fetechClassifyList, getTagClassify, delCurrClassify, addTags } from '@/services/operationCenter'
const { TextArea } = Input

const AddTag = Form.create({})((props) => {
  const { form, tagClassify, getVal } = props
  const { getFieldDecorator } = form

  return (<Form>
    <Form.Item label={`标签分类`} labelCol={{ span:6 }} wrapperCol={{ span: 18 }}>
      {getFieldDecorator('classifyId', {initialValue: '',})(
        <Select onChange={(v) => getVal(v, form.getFieldValue('labelName'))}>
          {tagClassify && tagClassify.map((r, index) => <Select.Option key={index} value={r.id}>{r.classifyName}</Select.Option>)}
        </Select>,
      )}
    </Form.Item>
    <Form.Item label={`标签值`} labelCol={{ span:6 }} wrapperCol={{ span: 18 }}>
      {getFieldDecorator('labelName', {initialValue: '',})
        (<TextArea rows={4} onChange={(e) => getVal(form.getFieldValue('classifyId'), e.target.value)} />)}
    </Form.Item>
    <p>多个标签值用逗号格开</p>
  </Form>)
})

const TagA = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [total, setTotalPage] = useState(null)
  const [dataList, setDataList] = useState([])
  const [tagClassify, setTagClassify] = useState([])
  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [addTagParam, setAddTagParam] = useState({classifyId: '', labelName: ''})
  const [currRocord, setCurrRocord] = useState({})

  const [param, setParam] = useState({
    pageNo: 1,
    pageSize: 10
  })
  useEffect(() => {
    _getTagClassify()
    _fetechClassifyList(param)
  }, [])

  const _getTagClassify = async () => {
    const res = await getTagClassify()
    if (res.code == 0) {
      setTagClassify(res.data)
    } else {
      message.error(res.msg)
    }
  }
  const _fetechClassifyList = async (param) => {
    const res = await fetechClassifyList(param)
    if (res.code == 0) {
      setDataList(res.data)
      setTotalPage(res.total)
    } else {
      message.error(res.msg)
    }
  }

  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      _fetechClassifyList({
        ...param,
        ...values
      })
    })
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      console.log(page)
    }
  }
  const getFields = () => {
    return (<>
      <Col span={8}>
        <Form.Item label="标签名称" labelCol={{ span:6 }} wrapperCol={{ span: 18 }}>
          {getFieldDecorator('couponName', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label={`标签分类`} labelCol={{ span:6 }} wrapperCol={{ span: 18 }}>
          {getFieldDecorator('classifyId', {initialValue: '',})(
            <Select>
              {tagClassify && tagClassify.map((r, index) => <Select.Option key={index} value={r.id}>{r.classifyName}</Select.Option>)}
            </Select>,
          )}
        </Form.Item>
      </Col>
    </>)
  }
  const columns = [
    {
      title: '分类名称',
      dataIndex: 'classifyName',
      key: 'classifyName',
    },
    {
      title: '分类属性',
      dataIndex: 'labelName',
      key: 'labelName',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (v, r, i) => {
        // return (<Button onClick={() => delCurrRecord(r)} type="danger">删除</Button>)
        return (<>
          <Popconfirm
            onConfirm={confirmDel}
            title="确定要删除选中的数据吗？"
            icon={<Icon type="question-circle-o" style={{ color: 'red' }} />}
          >
            <Button type="danger" onClick={() => setCurrRocord(r)}>删除</Button>
          </Popconfirm>
        </>)
      }
    },
  ]
  const confirmDel = async () => {
    console.log(currRocord)
    const res = await delCurrClassify({id: currRocord.id})
    if (res.code == 0) {
      message.success('删除成功！')
      _fetechClassifyList(param)
    } else {
      message.error(res.msg)
    }
  }
  const handleCancel = () => {
    setVisible(false)
  }
  const handleOk = async (e) => {
    console.log(addTagParam)
    if (!addTagParam.classifyId || !addTagParam.labelName) {
      message.warn('添加参数错误！')
      return
    }
    const res = await addTags(addTagParam)
    if (res.code == 0) {
      message.success('添加成功！')
      setVisible(false)
      _fetechClassifyList(param)
    } else {
      message.error(res.msg)
    }
  }

  const getVal = (classifyId, labelName) => {
    setAddTagParam({classifyId: classifyId, labelName: labelName})
  }
  return (<Form layout={formLayout}>
    <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    <Divider dashed />
    <Button type="primary" onClick={() => setVisible(true)} style={{marginBottom:"10px"}}>新增标签</Button>
    <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={dataList}/>
    <Modal
      title={"新增标签"}
      visible={visible}
      onOk={handleOk}
      confirmLoading={confirmLoading}
      onCancel={handleCancel}
    >
      <AddTag tagClassify={tagClassify} getVal={getVal} />
    </Modal>
  </Form>)
}

export default Form.create({})(TagA)
